import { Timeline } from "@mui/lab";
import {
  Box,
  Chip,
  FormControl,
  Grid,
  Paper,
  TextField,
  Typography,
  useTheme,
} from "@mui/material";
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import React from "react";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import PauseCircleFilledIcon from "@mui/icons-material/PauseCircleFilled";
import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
import Button from "@mui/material/Button";
import { useContext } from "react";
import { TitleContext } from "../../../router";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { useState } from "react";
import Loading from "../../../components/loading";
import examBeginUrl from "../../../img/exambegin.gif";
import { DataGrid } from "@mui/x-data-grid";
import examEndUrl from "../../../img/examend.gif";
import { useLocation } from "react-router-dom";
import { renderCellExpand } from "../../../components/RenderCellExpand";
import Score from "./Score";
import ScoreEdit from "./ScoreEdit";
import {
  DataGridPremium,
  GridToolbarContainer,
  GridToolbarExport,
} from "@mui/x-data-grid-premium";
import { useMutation } from "@tanstack/react-query";
import { mutateQueryFn } from "../../../query/mutateQueryFn";
import { GET_STUDENTS_URL } from "../../../constants/url";
import Rank from "./Rank";
import { GET_EXAMDETAIL_URL } from "../../../constants/url";

export default function ExamDetail(props) {
  // const state = useLocation();   //cid isEnd cname
  const state = useLocation().state;
  const [id, setId] = useState();
  const [isEnd, setIsEnd] = useState();
  const [name, setName] = useState();
  const nowTitle = useContext(TitleContext);
  useEffect(() => {
    //  nowTitle.setnowTitle(7) : nowTitle.setnowTitle(8);
    setId(state.id);
    setIsEnd(state.isEnd);
    setName(state.name);
  }, []);

  //获取选课列表
  const {
    data,
    isLoading: getLoading,
    mutate: getMutate,
    isSuccess: getSuccess,
  } = useMutation(["getStudent"], mutateQueryFn);
  useEffect(() => {
    if (state.id) {
      getMutate({
        url: GET_STUDENTS_URL,
        params: { id: state.courseId },
        method: "get",
        useToken: true,
      });
    }
  }, []);
  const [rows, setRows] = useState([]);
  const [selectionModel, setSelectionModel] = React.useState([]);
  useEffect(() => {
    if (getSuccess) {
      setRows(
        data.data.data.data.map((val, key) =>
          val.id !== undefined
            ? {
                sid: val.userId,
                name: val.name,
                grade: val.grade,
                major: val.major,
                gender: val.gender,
                score: {
                  totalScore: val.total,
                  usualScore: val.usual,
                  testScore: val.exam,
                },
                rank: {
                  isEnd: state.isEnd,
                  rank: val.rank,
                },
                edit: {
                  isEnd: state.isEnd,
                  sid: val.id,
                  course: state.courseId,
                  selectionModel: selectionModel,
                },
                id: val.id,
              }
            : {}
        )
      );
    } else {
    }
  }, [getSuccess, selectionModel]);
  const columns = [
    {
      field: "id",
      headerName: "序号",
      flex: 0,
      editable: false,
    },
    {
      field: "sid",
      headerName: "学号",
      flex: 1,
      editable: false,
      renderCell: renderCellExpand,
    },
    {
      field: "name",
      headerName: "姓名",
      flex: 1,
      editable: false,
      renderCell: renderCellExpand,
    },
    {
      field: "gender",
      headerName: "性别",
      flex: 1,
      editable: false,
      renderCell: renderCellExpand,
    },
    {
      field: "grade",
      headerName: "年级",
      flex: 1,
      editable: false,
      renderCell: renderCellExpand,
    },
    {
      field: "major",
      headerName: "专业",
      flex: 1,
      editable: false,
      renderCell: renderCellExpand,
    },
    {
      field: "score",
      headerName: "成绩",
      flex: 1,
      editable: false,
      renderCell: Score,
    },
    {
      field: "rank",
      headerName: "排名",
      flex: 0,
      editable: false,
      renderCell: Rank,
    },
    {
      field: "edit",
      headerName: "编辑",
      flex: 1,
      editable: false,
      renderCell: ScoreEdit,
    },
  ];

  const mytoolbar = () => {
    return (
      <GridToolbarContainer>
        <GridToolbarExport
          csvOptions={{
            fileName: name ?? "未命名文件",
            delimiter: ",",
            utf8WithBom: true,
          }}
        />

        {/* <GridToolbar /> */}
      </GridToolbarContainer>
    );
  };

  return (
    <>
      <Box sx={{ height: 520 }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={20}
          rowsPerPageOptions={[20]}
          checkboxSelection={isEnd === true ? true : false}
          disableSelectionOnClick
          experimentalFeatures={{ newEditingApi: true }}
          selectionModel={selectionModel}
          onSelectionModelChange={(newSelectionModel) => {
            setSelectionModel(newSelectionModel);
          }}
          components={{
            Toolbar: mytoolbar,
          }}
          autoHeight
        />
      </Box>
    </>
  );
}
